<template>
  <div id="Reference">
    <el-breadcrumb
      separator="/"
      style="padding-left: 10px; padding-bottom: 10px; font-size: 12px"
    >
      <el-breadcrumb-item>系统首页</el-breadcrumb-item>
      <el-breadcrumb-item>参考手册</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="6">
      <el-col :span="16">
        <el-card class="box-card" shadow="hover">
          <pdf
            ref="pdf"
            src="/doc.pdf"
            v-for="i in numPages"
            :key="i"
            :page="i"
          >
          </pdf> </el-card
      ></el-col>
      <el-col :span="6">
        <el-card
          class="box-card"
          shadow="hover"
          style="margin-left: 20px"
          align="center"
        >
          <div slot="header"><b>请扫码关注学院微信公众号</b></div>
          <img src="/wechat.jpg" style="width: 80%; height: 80%" />
        </el-card>
        <el-card
          class="box-card"
          shadow="hover"
          style="margin-left: 20px; margin-top: 20px"
          align="center"
        >
          <div slot="header"><b>请扫码使用素拓小程序</b></div>
          <img src="/mini.jpg" style="width: 80%; height: 80%" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import pdf from "vue-pdf";
export default {
  data() {
    return {
      pdfUrl: "/public/doc.pdf",
      numPages: 2,
    };
  },
  components: {
    pdf,
  },
};
</script>